---
title: Astro Острова
description: >-
  Astro Острова (или Компоненты-острова) — это шаблон веб-архитектуры, основанный компанией Astro. 
  Термин "архитектура островов" был впервые использован в 2019 году ведущим фронтенд-архитектором Etsy 
  Кэти Сайлор-Миллер, а затем развит создателем Preact Джейсоном Миллером.
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';

Astro является пионером и популяризатором фронтенд-архитектуры под названием **Острова**. Архитектура Островов обеспечивает более высокую производительность фронтенда, помогая вам избежать монолитных паттернов JavaScript и автоматически удаляя весь несущественный JavaScript со страницы. Разработчики могут продолжать использовать свои любимые компоненты UI и фреймворки с Astro, получая все эти преимущества.

## Краткая история

Термин "component island" был впервые предложен фронтенд-архитектором Etsy [Кэти Сайлор-Миллер](https://twitter.com/ksylor) в 2019 году. Затем эта идея была развита и задокументирована в [этом посте](https://jasonformat.com/islands-architecture/) создателем Preact Джейсоном Миллером 11 августа 2020 года.

> Общая идея архитектуры "островов" обманчиво проста: рендерите HTML-страницы на сервере и вставляйте заполнители или слоты вокруг высокодинамичных областей [...], которые затем могут быть "гидрированы" на клиенте в небольшие автономные виджеты, повторно используя их исходный HTML, рендеримый на сервере. 
> — Джейсон Миллер, создатель Preact

Техника, на которой основан этот архитектурный паттерн, также известна как **частичная** или **селективная гидратация**.

В отличие от этого, большинство веб-фреймворков на базе JavaScript гидратируют и рендерят весь веб-сайт как одно большое JavaScript-приложение (также известное как одностраничное приложение, или SPA). SPA обеспечивают простоту и мощность, но страдают от проблем с производительностью загрузки страниц из-за интенсивного использования JavaScript на стороне клиента.

SPA занимают свое место, даже [встроенные в страницу Astro](/ru/guides/migrate-to-astro/from-create-react-app/). Однако SPA лишены встроенной возможности селективной и стратегической гидратации, что делает их тяжелым выбором для большинства современных веб-проектов.

Astro стал популярным как первый основной веб-фреймворк на JavaScript с встроенной селективной гидратацией, использующим паттерн "островных компонентов", впервые предложенный Сайлор-Миллер.

## Что такое остров?

**В Astro под "островом" понимается любой интерактивный компонент пользовательского интерфейса на странице.** Думайте об острове как об интерактивном виджете, плавающем в море статичного, легкого, рендеримого сервером HTML.

<IslandsDiagram>
  <Fragment slot="headerApp">Header (интерактивный остров)</Fragment>
  <Fragment slot="sidebarApp">Sidebar (статичный HTML)</Fragment>
  <Fragment slot="main">
    Статичный контент с текстом, картинками и т.д.
  </Fragment>
  <Fragment slot="carouselApp">Image carousel (интерактивный остров)</Fragment>
  <Fragment slot="footer">Footer (статичный HTML)</Fragment>
  <Fragment slot="source">Источник: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

Остров всегда работает изолированно от других островов на странице, и на странице может существовать несколько островов. Острова могут обмениваться состоянием и взаимодействовать друг с другом, даже если они работают в разных контекстах компонентов.

Такая гибкость позволяет Astro поддерживать множество UI-фреймворков, таких как [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) и [SolidJS](https://www.solidjs.com/). Поскольку они независимы, вы можете даже смешивать несколько фреймворков на одной странице.

:::tip
Хотя большинство разработчиков придерживаются только одного UI-фреймворка, Astro поддерживает несколько фреймворков в одном проекте. Это позволяет вам:

- Выбрать фреймворк, который лучше всего подходит для каждого компонента.
- Изучать новый фреймворк без необходимости начинать новый проект.
- Сотрудничать с другими людьми, даже работая в разных фреймворках.
- Постепенно переводить существующий сайт на другой фреймворк без простоя.
:::

## Создание острова

По умолчанию Astro автоматически переводит каждый компонент UI в HTML и CSS, **убирая весь JavaScript на стороне клиента**.

```astro title="src/pages/index.astro"
<MyReactComponent />
```

Это может показаться строгим, но именно такое поведение по умолчанию обеспечивает быстродействие сайтов Astro и защищает разработчиков от случайной отправки ненужного или нежелательного JavaScript, который может замедлить работу их сайта.

Для превращения любого статичного компонента пользовательского интерфейса в интерактивный остров требуется только директива `client:*`. Затем Astro автоматически собирает и упаковывает ваш JavaScript на стороне клиента для оптимизации производительности.

```astro title="src/pages/index.astro" ins="client:load"
<!-- Теперь этот компонент интерактивен на странице! 
     Остальная часть вашего сайта остается статичной. -->
<MyReactComponent client:load />
```

При использовании островов клиентский JavaScript загружается только для явно интерактивных компонентов, которые вы отмечаете с помощью директив `client:*`.

А поскольку взаимодействие настраивается на уровне компонентов, вы можете устанавливать различные приоритеты загрузки для каждого компонента в зависимости от его использования. Например, `client:idle` указывает компоненту загружаться, когда браузер простаивает, а `client:visible` указывает компоненту загружаться только после того, как он попадает в область видимости.

## В чем преимущества Островов?

Наиболее очевидным преимуществом создания сайта с помощью Astro Островов является производительность: большая часть вашего сайта преобразуется в быстрый, статичный HTML, а JavaScript загружается только для отдельных компонентов, которым он необходим. JavaScript — один из самых медленных ресурсов, которые можно загружать побайтно, поэтому каждый байт имеет значение.

Еще одно преимущество — параллельная загрузка. На приведенной выше иллюстрации низкоприоритетному острову "карусель изображений" не нужно блокировать высокоприоритетный остров "заголовок". Оба загружаются параллельно и гидратируются изолированно, что означает, что заголовок становится интерактивным немедленно, не дожидаясь более тяжелой карусели, расположенной ниже на странице.

Что еще лучше, вы можете указать Astro, как и когда именно отображать каждый компонент. Если карусель изображений требует долгой загрузки, вы можете подключить специальную [клиентскую директиву](/ru/reference/directives-reference/#client-directives), которая скажет Astro загружать карусель только тогда, когда она становится видимой на странице. Если пользователь ее никогда не увидит, она и не загрузится.

В Astro вы, как разработчик, должны явно указать Astro, какие компоненты на странице также должны запускаться в браузере. Astro будет гидрировать только то, что необходимо на странице, и оставит остальную часть вашего сайта в виде статического HTML.

**Острова — это секрет быстродействия Astro по умолчанию!**